<template>
	<view class="user-info">
		<view class="user-info-list">
			<view class="user-info-list-item flex-center-between">
				<view class="user-info-list-item-name">头像</view>
				<image
					class="user-info-list-item-avatar"
					:src="userInfo.avatar"
					mode="aspectFill"
					@click="uploadImage">
				</image>
			</view>
			<view class="user-info-list-item flex-center">
				<view class="user-info-list-item-name">昵称</view>
				<input
					type="text"
					:value="userInfo.nickname" 
					placeholder="请输入昵称"
					data-name="nickname"
					maxlength="10"
					@input="inputChange" />
			</view>
		</view>
		
		<view class="submit-btn">
			<button @click="editUserInfo">保存修改</button>
		</view>
	</view>
	
</template>

<script>
	import { mapState, mapMutations } from 'vuex'
	export default {
		components: {
			
		},
		data() {
			return {
				userInfo: {}
			}
		},
		onShow() {
			this.userInfo = uni.getStorageSync('USER_INFO')
		},
		methods: {
			/**
			 * 上传头像
			 */
			uploadImage() {
				uni.chooseImage({
					count: 1, //默认9
					success: chooseImageRes => {
						const tempFilePaths = chooseImageRes.tempFilePaths
						uni.uploadFile({
							url: this.$baseUrl + '/api/upload/picture',
							filePath: tempFilePaths[0],
							name: 'images',
							header: {
								'content-type': 'multipart/form-data',
								'token': uni.getStorageSync('USER_INFO').token || '',
								'way': 'app',
							},
							success: (uploadFileRes) => {
								// console.log(uploadFileRes.data)
								this.userInfo.avatar = this.$baseUrl + uploadFileRes.data
							},
							fail: (err) => {
								uni.showToast({
									title: '上传失败' + err,
									icon: 'none'
								})
							}
						});
					}
				});
			},
			
			/**
			 * 编辑账号信息
			 */
			async editUserInfo() {
				let res = await this.$http.request({
					method: 'post',
					url: '/api/account/edit',
					data: {
						nickname: this.userInfo.nickname,
						avatar: this.userInfo.avatar
					}
				})
				if (res.status === 1) {
					uni.setStorageSync('USER_INFO', this.userInfo)
					uni.switchTab({url: 'user'})
					uni.showToast({
						title: '修改成功',
						icon: 'success'
					})
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none',
						duration: 3000
					})
				}
			},
			/**
			 * 监听表单输入框变化
			 * @param {Object} e
			 */
			inputChange(e) {
				this.userInfo[e.target.dataset.name] = e.detail.value
			},
			/**
			 * 跳转
			 * @param {String} page
			 */
			pageTo(page) {
				uni.navigateTo({
					url: page
				});
			},
			
		}
	}
</script>

<style lang="scss">
	.user-info{
		&-list{
			background: $uni-bg-color;
			padding: 0 30rpx;
			&-item{
				height: 110rpx;
				border-bottom: 1rpx solid $uni-border-color;
				&-name{
					width: 125rpx;
					color: $uni-text-color-grey2;
					margin-right: 60rpx;
				}
				&-avatar{
					height: 100rpx;
					width: 100rpx;
					border-radius: 50%;
				}
				input{
					width: 100%;
					text-align: right;
				}
			}
			&-area{
				&-name{
					margin-right: 60rpx;
					color: $uni-text-color-grey2;
				}
				&-value{
					width: 100%;
					font-size: $uni-font-size-sm2;
				}
			}
		}
		.submit-btn{
			padding: 0 30rpx;
		}
	}
</style>
